<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;;
            margin: 0px;
        }
        ul{
            list-style-type: none;
        }
        img{

            width: 600px;
            height: 400px;
            position: absolute;

        }
        .side{
            width:600px;
            height: 400px;
            position: absolute;
        }
        li{
            transition: all 1s;
            opacity: 1;


        }
        #d1{
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: silver;
            top: 200px;
            right: 0px;
            opacity: 0;
            border-radius: 50px;

        }
        #d2{
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: silver;
            top: 200px;
            opacity: 0;
            border-radius: 50px;

        }
        p{
            position: absolute;
            bottom: 0px;
            color: silver;

        }
        .side span{
            /*position: absolute;*/
            background-color: silver;
            width: 20px;
            height: 20px;
            display: inline-block;border-radius: 50%;;
            opacity: 0.4;

        }
        #p1{
            right: 5px;

        }
    </style>
</head>
<body>
<div class="side" id = "lunbo">

    <ul>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539337836520&di=33f921fb2f7c93449b21655817235938&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F5870b657d448e.jpg" alt="">
            <p>2017 - 7 - 17 谦年演唱会 郑州</p>
        </li>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539337857727&di=9b449bfbcc47656af2d957a8a81d992c&imgtype=0&src=http%3A%2F%2Fimg17.3lian.com%2Fd%2Ffile%2F201701%2F09%2F3967a125b71ca485311007e038027238.jpg" alt="">
            <p>2018 - 7 - 17 我好想在哪见过你演唱会  北京</p>
        </li>
    <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539337896348&di=e4107d01b1632938c50b8e5787720dac&imgtype=0&src=http%3A%2F%2Fwww.deskier.com%2Fuploads%2Fallimg%2F170710%2F1-1FG0214J1.jpg">
        <p>2019 - 7 - 17 摩天大楼世界巡演 巴黎</p>
    </li>
        <div id="d1">&nbsp;&nbsp;&nbsp;> </div>
        <div id="d2">&nbsp;< </div></ul>
    <p id="p1">
        <span ></span>
        <span ></span>
        <span ></span>
    </p>

</div>

</body>
<script>
    var li=document.getElementById('lunbo').getElementsByTagName("li");
    var num=0;
    var len=li.length;

   function f1(){
        li[num].style.opacity = '0';

        num = ++ num == len ? 0 : num;
        li[num].style.opacity = '1';

    }

    var c = setInterval(function () {f1()},2000);

    var d1 = document.getElementById('d1');
    var d2 = document.getElementById('d2');
    var d3 = document.getElementById('lunbo');
    d1.onclick = function () {f1()};
    document.getElementById('p1').onmouseover = function () {f1()};
    d2.onclick = function () {f1()};

    d3.onmouseout = function () {
        d1.style.display = 'none';
        d2.style.display = 'none';
        c  = setInterval(function () {f1()},2000);
    };

    d3.onmouseover  =   function (){
        d1.style.display = 'block';
        d2.style.display = 'block';
        d1.style.opacity = '0.5';
        d2.style.opacity = '0.5';
        clearInterval(c);
    };
</script>
</html>